<script setup lang="ts">
import { getAllMenuListAPI,addMenuAPI,updateMenuAPI,deleteMenuAPI } from '@/api/permission/menu.ts';
import { ref, onMounted } from 'vue';
import { MenuItem , MenuAddRequest} from '@/types/permission/menu';
import { ElMessage,ElMessageBox } from 'element-plus';

// 菜单列表
const menuList = ref<MenuItem[]>([]);

// 获取菜单列表
const getMenuList = async() => {
    loading.value = true;
    const res = await getAllMenuListAPI();
    // console.log(res);
    menuList.value = res.data;
    loading.value = false;
}

// 表格加载
const loading = ref<boolean>(false);

// 新增弹窗
const dialogVisible = ref<boolean>(false);

// 弹框关闭
const handleCancel = () => {
    dialogVisible.value = false;
    addForm.value = {
        name: '',
        level: 0,
        pid: 0,
        code: ''
    }
    formRef.value.resetFields();
}

// 弹框标题
const dialogTitle = ref<string>('添加菜单')

// 添加菜单
const addMenu = (row: MenuItem) => {
    // 打开弹窗
    dialogVisible.value = true;
    // 修改标题
    dialogTitle.value = '添加菜单';
    // 保存当前点击项的id 和 level
    addForm.value.pid = row.id;
    addForm.value.level = row.level + 1;
}

// 添加菜单表单项
const addForm = ref<MenuAddRequest>({
    name: '',
    level: 0,
    pid: 0,
    code: ''
})

// 校验规则
const rules = {
    name: [
        {required: true, message: '请输入权限名称', trigger: 'blur'},
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
    ],
    code: [
        {required: true, message: '请输入权限值', trigger: 'blur'},
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
    ]
}

// 表单对象
const formRef = ref<any>(null)

// 添加菜单确认
const addMenuConfirm = async() => {
    // 整体校验
    formRef.value.validate(async (valid : boolean) => {
        if(valid) {
           if(dialogTitle.value === '添加菜单') {
                const res = await addMenuAPI(addForm.value);
                if(res.code === 200) {
                    getMenuList();
                    dialogVisible.value = false;
                    ElMessage.success('添加成功');
                } else {
                    ElMessage.error('添加失败');
                }
           } else {
                const res = await updateMenuAPI(addForm.value);
                if(res.code === 200) {
                    getMenuList();
                    dialogVisible.value = false;
                    ElMessage.success('编辑成功');
                } else {
                    ElMessage.error('编辑失败');
                }
           }
        }
    })
}

// 编辑菜单(编辑菜单确认逻辑与添加菜单一致)
const editMenu = (row: MenuItem) => {
    dialogVisible.value = true;
    dialogTitle.value = '编辑菜单';
    addForm.value.name = row.name;
    addForm.value.code = row.code;
    addForm.value.id = row.id;
    addForm.value.pid = row.pid;
    addForm.value.level = row.level;
}

// 删除菜单
const deleteMenu = (id: number) => {
    ElMessageBox.confirm('确认删除本菜单吗吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async() => {
        const res = await deleteMenuAPI(id);
        if(res.code === 200) {
            getMenuList();
            ElMessage.success('删除成功');
        } else {
            ElMessage.error('删除失败');
        }
    }).catch(() => {

    })
}

// 初始化
onMounted(() => {
    getMenuList();
})

</script>

<template>
    <div >
        <el-card style="margin-top: 20px;">
            <el-table
            v-loading="loading"
                :data="menuList"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                >
                <el-table-column width="150px" align="center" prop="name" label="名称" />
                <el-table-column width="150px" align="center"  label="权限值">
                    <template v-slot="{ row }">
                        <el-tag v-if="row.code" type="primary" effect="dark">{{ row.code }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="updateTime" label="修改时间"  />
                <el-table-column width="300px"  align="center" prop="修改时间" label="操作">
                    <template v-slot="{ row }">
                        <el-button v-disabled="'btn.Permission.add'"  @click="addMenu(row)" type="primary" :disabled="row.level === 4">{{  row.level >= 3 ?  ' 添加功能': '添加菜单' }}</el-button>
                        <el-button v-disabled="'btn.Permission.update'" @click="editMenu (row)" type="primary" :disabled="row.level === 1">编辑</el-button>
                        <el-button v-disabled="'btn.Permission.remove'" @click="deleteMenu(row.id)" type="primary" :disabled="row.level === 1">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog  @close="handleCancel" style="max-width: 500px" v-model="dialogVisible" v-bind:title="dialogTitle">
            <el-form ref="formRef" :model="addForm" label-width="60px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入权限名称"></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="code">
                    <el-input v-model="addForm.code" placeholder="请输入权限值"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="addMenuConfirm">确定</el-button>
                <el-button type="primary" @click="handleCancel">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>


<style scoped lang="scss">

</style>